<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>
      <el-input clearable placeholder="请输入内容" v-model="params.carNumber" class="search-main" />
      <span class="search-label" >车主姓名：</span>
      <el-input clearable placeholder="请输入内容" v-model="params.personName" class="search-main" />
      <span class="search-label">状态：</span>
      <el-select v-model="params.cardStatus">
        <el-option
        v-for="item in statusList"
        :key="item.value"
        :label="item.text"
        :value="item.value" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="serach">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/addCard')">添加月卡</el-button>
      <el-button>批量删除</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="cardList">
        <el-table-column type="index" label="序号" :index="indexMethod" />
        <el-table-column label="车主名称" prop="personName"/>
        <el-table-column label="联系方式" prop="phoneNumber"/>
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand"/>
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />
        <el-table-column label="状态" prop="cardStatus" :formatter="formaCardStatus" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text">续费</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text" @click="editItem(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="deleteItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <!-- @size-change="handleSizeChange"：当页数变化的时候会触发该方法 -->
      <!-- @current-change="handleCurrentChange"：当前页变化时会触发该方法 -->
      <!-- :current-page="currentPage4"：表示当前页 -->
      <!-- :page-sizes="[100, 200, 300, 400]"：设置每页的数据容量 -->
      <!-- :page-size="100"：表示每页的数据 -->
      <!-- layout="total, sizes, prev, pager, next, jumper"：显示分页组件的功能按钮 -->
      <!-- :total="400"：显示总共有多少条数据 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[2, 4, 6]"
      :page-size="params.pageSize"
      layout="total,sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    </div>
    <!-- 添加楼宇 -->

  </div>
</template>


<script>
import { getCardListAPI,detelteCardAPI } from "@/api/card"
export default {
    data() {
      return {
        // 请求参数
        params: {
          page: 1,
          pageSize: 2,
          carNumber:'',
          personName:'',
          cardStatus:null
        },
        // 月卡列表
        cardList: [],
        total:0,
        // 状态列表
        statusList:[
          {
            value:null,//其中null代表全部
            text:'全部'
          },
          {
            value:0,
            text:'可用'
          },
          {
            value:1,
            text:'不可用'
          }
        ]
      }
    },
    mounted() {
      this.getCardList()

    },
    methods: {
      editItem(id){
          // console.log(id)

          this.$router.push({
            path:'/addCard',
            query:{
              id
            }
          })
      },
      // 删除数据
       deleteItem(id){

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await detelteCardAPI(id)
          this.getCardList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 查询方法
      serach(){
          this.params.page=1
          this.getCardList()
      },
      indexMethod(index){
          // console.log(index)
          // 当前页之前的所有数据=当前页的之前的所有页数乘以容量
          // （当前页-1）*每页的容量
          return (this.params.page-1)*this.params.pageSize+index+1
      },
      handleSizeChange(val){
        // console.log(111)
        // console.log(val)
        this.params.pageSize=val
        this.getCardList()
      },
      handleCurrentChange(val){
          this.params.page=val
          this.getCardList()
      },
      async getCardList() {
        const res = await getCardListAPI(this.params)
        this.cardList = res.data.rows
        // console.log(res)
        this.total=res.data.total
        // console.log(this.cardList)
      },
      formaCardStatus(row, column, cellValue, index){
          return cellValue==0?'可用':'不可用'
      }
    }
  }

</script>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}


.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
